<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll'
import { defaultOptions, mergeDefaultOptions } from '@/hooks/usePage'
import mescrollBody from '@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue'
const { t } = useI18n()

// 调用mescroll的hook (注: mescroll-uni不用传onPageScroll,onReachBottom, 而mescroll-body必传)
const { mescrollInit, getMescroll } = useMescroll(onPageScroll, onReachBottom)

const props = defineProps({
    page: {
        type: Object,
        default: () => ({})
    },
    type: {
        type: String,
        default: 'body'
    },
    height: {
        type: String,
        defalut: '600px'
    }
})

const emits = defineEmits([
    'resetData',
    'downBeforeCallback',
    'downCallback',
    'upCallback',
    'onGetListLafer',
    'triggerDownScroll'
])

const state = mergeDefaultOptions(defaultOptions, props.page)

// 重置数据
const resetData = () => {
    getMescroll().resetUpScroll()
    emits('resetData')
}
// 方法 开启下拉刷新
const triggerDownScrollFn = () => {
    getMescroll().triggerDownScroll()
    emits('triggerDownScroll')
}

// 下拉刷新的回调 (mixin默认resetUpScroll)
const downCallback = () => {
    emits('downBeforeCallback')
    if (getMescroll().optUp.use) {
        getMescroll().resetUpScroll()
        emits('downCallback')
    } else {
        setTimeout(() => {
            getMescroll().endSuccess()
        }, 100)
    }
}

// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
const upCallback = async (mescroll) => {
    // console.log('upCallback', mescroll.num, mescroll.size)

    // 第一页需手动制空列表
    // if (mescroll.num == 1) {
    //   state.data = [];
    //   // 存在beforeLoadingFn方法则调用
    //   if (state.beforeLoadingFn) {
    //     state.beforeLoadingFn();
    //   }
    // }

    // 判断是否存在state.fetchData属性
    if (state.fetchData) {
        state.pagination!.current = mescroll.num
        state.pagination!.size = mescroll.size

        // 调用state.pageList方法发起分页查询
        const res = await state.fetchData({
            ...state.params,
            current: state.pagination?.current,
            size: state.pagination?.size,
            descs: state.descs?.join(','),
            ascs: state.ascs?.join(',')
        })

        if (res.ok) {
            // 设置展示的数据数组
            // 第一页需手动制空列表
            if (mescroll.num == 1) {
                state.data = []
                // 存在beforeLoadingFn方法则调用
                if (state.beforeLoadingFn) {
                    state.beforeLoadingFn()
                }
            }
            nextTick(() => {
                state.data = state.data?.concat(
                    state.isPage ? res.data[state.props.item] : res.data
                )
                // 设置分页信息中的总数据条数
                state.pagination!.total = state.isPage ? res.data[state.props.totalCount] : 0

                //方法一(推荐): 后台接口有返回列表的总页数 totalPage
                mescroll.endByPage(state.data?.length, res.data.pages) //必传参数(当前页的数据个数, 总页数)

                emits('upCallback')

                //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
                // mescroll.endBySize(state.data?.length, state.pagination?.total); //必传参数(当前页的数据个数, 总数据量)

                emits('onGetListLafer')
            })
        } else {
            mescroll.endErr() // 请求失败, 结束加载
        }
    }
}
const getHeight = () => {
    return uni.getSystemInfoSync().windowHeight - 100
}
defineExpose({
    resetData,
    triggerDownScrollFn
})
</script>

<template>
    <mescroll-body
        :height="getHeight() + 'px'"
        @down="downCallback"
        @init="mescrollInit"
        @up="upCallback"
        :down="{
            textInOffset: t('common.PullDownRefresh'),
            textOutOffset: t('common.ReleaseUpdate'),
            textLoading: t('common.Loading'),
            textSuccess: t('common.LoadSuccessfully'),
            textErr: t('common.LoadFailure')
        }"
        :up="{
            textLoading: t('common.Loading')
        }"
    >
        <slot :list="state.data"></slot>
    </mescroll-body>
</template>

<style scoped lang="scss"></style>
